<template>
  <BeTable
    class="interface-list"
    rowKey="id"
    :columns="columns"
    :pagination="{ pageSize: pageSize, total: total }"
    :formSetting="{ fields: searchFields, showExpandButton: false, maxShowFields: 6 }"
    :rowSelection="_rowSelection"
    @handleSearch="handleSearch"
    :beforeFetch="beforeFetch"
    :api="getInterfaceList"
  >
    <!-- -->
    <template #toolbar>
      <a-dropdown trigger="click">
        <BeButton type="primary">
          导出
          <DownOutlined />
        </BeButton>
        <template #overlay>
          <a-menu>
            <a-menu-item :disabled="selectedRowKeys.length <= 0" @click.stop="exportInterfaceListByChecked()">导出选中结果</a-menu-item>
            <a-menu-item @click.stop="exportInterfaceList()">导出查询结果</a-menu-item>
          </a-menu>
        </template>
      </a-dropdown>
      <BeButton class="create-btn" type="primary" @click="showBatchInput = true">批量录入</BeButton>
    </template>
    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'filing'">
        <span v-if="record.filing == '1'" class="tag-recorded">已备案</span>
        <span v-else class="tag-unrecorded">未备案</span>
      </template>
      <template v-else-if="column.key === 'handstatus'">
        <span>{{ record.handstatus == '1' ? '自动发现' : record.handstatus == '0' ? '手工录入' : '' }}</span>
      </template>
    </template>
  </BeTable>
  <BatchInput v-model:open="showBatchInput" />
</template>

<script lang="ts" setup>
import { createVNode, ref } from 'vue'
import { message, TableColumnsType, Modal } from 'ant-design-vue'
import dayjs from 'dayjs'
import { interfaceListApi } from '@/api/interfaceL-list'
import type { GetInterfaceListParams } from '@/api/interfaceL-list/type'
import { DownOutlined } from '@ant-design/icons-vue'
import BatchInput from './BatchInput.vue'
import { handleExport } from '@/utils'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
defineOptions({ name: 'InterfaceListPage' })

const pageSize = ref(15)
const total = ref(0)
const showBatchInput = ref(false)
const searchParams = ref<GetInterfaceListParams>({})
// 搜索字段
const searchFields = [
  { label: '接口名称', prop: 'interfaceName', component: 'Input', componentProps: { placeholder: '请输入接口名称', allowClear: true } },
  { label: 'URL地址', prop: 'api', component: 'Input', componentProps: { placeholder: '请输入URL地址', allowClear: true } },
  {
    label: '请求方法',
    prop: 'method',
    component: 'Select',
    componentProps: {
      allowClear: true,
      placeholder: '请选择',
      options: [
        { label: 'GET', value: 'GET' },
        { label: 'POST', value: 'POST' },
        { label: 'PUT', value: 'PUT' },
        { label: 'DELETE', value: 'DELETE' }
      ]
    }
  },
  { label: '所属站点', prop: 'domain', component: 'Input', componentProps: { placeholder: '请选择站点', allowClear: true } },
  {
    label: '是否备案',
    prop: 'filing',
    component: 'Select',
    componentProps: {
      allowClear: true,
      placeholder: '请选择',
      options: [
        { label: '已备案', value: '1' },
        { label: '未备案', value: '0' }
      ]
    }
  }
]

// 列定义
const columns: TableColumnsType = [
  { title: '接口名称', align: 'left', fixed: 'left', dataIndex: 'interfaceName', key: 'interfaceName', width: '20%' },
  { title: 'URL地址', align: 'left', dataIndex: 'api', key: 'url', width: '25%' },
  { title: '请求方法', dataIndex: 'method', key: 'method' },
  { title: '站点', dataIndex: 'domain', key: 'site', width: '12%' },
  { title: '协议', dataIndex: 'protocol', key: 'protocol' },
  { title: '是否录入', dataIndex: 'handstatus', key: 'handstatus' },
  { title: '是否备案', dataIndex: 'filing', key: 'filing' }
]

// 行选择
const selectedRowKeys = ref<(string | number)[]>([])
const _rowSelection = ref({
  selectedRowKeys,
  onChange: (keys: (string | number)[], _selectedRows: any) => {
    selectedRowKeys.value = keys
  }
})

// // 处理搜索前参数（BeTable 会传入 params）
const beforeFetch = (params: any) => {
  searchParams.value = params
  return params
}

const handleSearch = async (params: any) => {
  console.log('params', params)
}

// 获取接口列表
const getInterfaceList = async (params?: GetInterfaceListParams) => {
  return interfaceListApi.getInterfaceList({ data: { ...params } })
}
// 导出选中结果
const exportInterfaceListByChecked = async () => {
  handleExport(interfaceListApi.exportInterfaceList, '接口列表-导出选中结果.xlsx', '是否导出所选数据？', { ids: selectedRowKeys.value })
}

// 按查询条件导出
const exportInterfaceList = async () => {
  const params: any = { ...searchParams.value }
  delete params.page
  delete params.size
  handleExport(interfaceListApi.exportInterfaceList, '接口列表-导出查询结果.xlsx', '是否导出所有查询结果？', params)
}
</script>

<style lang="scss" scoped>
.interface-list {
  background-color: var(--color-white);

  .options-btns {
    display: flex;
    gap: 8px;
    justify-content: center;
  }

  .tag-recorded {
    color: #19a633;
    font-weight: 500;
  }
  .tag-unrecorded {
    color: #999;
  }
}
</style>
